<template>
  <div>
    <div class="headerbox" @click="getLocalTime">
      <router-link :to="{ name: 'cinema' }" class="header-left"
        ><p @click="back">&lt;</p></router-link
      >
      <p class="headerright">{{ cinemaInfo.movieName }}</p>
    </div>
    <div class="titleInfo">
      <div>{{ cinemaInfo.showTime }}</div>
      <div>{{ cinemaInfo.name }}</div>
    </div>
    <div class="centerInfo">
      <div class="centerInfo2">
        <span>{{ cinemaInfo.seatTypeList[0].name }}</span>
        <img style="width: 0.2rem" :src="cinemaInfo.seatTypeList[0].icon" />
      </div>
      <div class="centerInfo2">
        <span>{{ cinemaInfo.seatTypeList[1].name }}</span>
        <img style="width: 0.2rem" :src="cinemaInfo.seatTypeList[1].icon" />
      </div>
      <div class="centerInfo2">
        <span>{{ cinemaInfo.seatTypeList[2].name }}</span>
        <img style="width: 0.2rem" :src="cinemaInfo.seatTypeList[2].icon" />
      </div>
      <div class="centerInfo2">
        <span>{{ cinemaInfo.seatTypeList[3].name }}</span>
        <img style="width: 0.2rem" :src="cinemaInfo.seatTypeList[3].icon" />
      </div>
    </div>
    <div class="screen">
      <div class="screen-text">屏幕方向</div>
    </div>
    <div class="box">
      <div
        v-for="(seatItem, index) in cinemaInfo.seatList"
        class="seatClass"
        :key="seatItem.id"
        @click="clickzuowei(seatItem)"
        :style="{
          height: height + 'rem',
          width: width + 'rem',
          top: seatItem.gRow * positionDistin + 'rem',
          left: seatItem.gCol * positionDistin + 'rem'
        }"
      >
        <img
          class="seatImgClass"
          :seatId="seatItem.id"
          :seatIndex="index"
          :src="cinemaInfo.seatTypeList[seatItem.type].icon"
        />
      </div>
    </div>
    <div class="btn" @click="ok">确 认 选 座</div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { Dialog } from 'vant'
// import axios from 'axios'
// import { Notify } from 'vant'

export default defineComponent({
  data() {
    return {
      name: '万里归途',
      runtime: '137',
      category: '剧情|战争',
      Castlist: '张译 王俊凯 殷桃',
      newDate: '',
      filmPoster:
        'https://static.maizuo.com/pc/v5/usr/movie/f31367bb1a275f032ea3793a0571d9e0.jpg',
      //影院 厅信息
      cinemaInfo: {
        errorCode: 0,
        errorMsg: '',
        name: '4号厅',
        movieName: '请选择座位',
        showTime: '2022-10-14 周五 16:50',
        cinema_name: '惊奇队长影院',
        films: [],
        filmId: 0,
        cinemas: [],
        cinemaId: 0,
        filmName: '',
        imgUrl:
          'https://static.maizuo.com/pc/v5/usr/movie/f31367bb1a275f032ea3793a0571d9e0.jpg',
        //座位信息
        seatList: [
          {
            //座位id
            id: '16879097',
            //座位X轴实际位置，去掉过道
            row: '1',
            //座位Y轴实际位置，去掉过道
            col: '1',
            //座位X轴位置
            gRow: 1,
            //座位Y轴位置
            gCol: 4,
            //类型：区分座位状态，详情看seatTypeList数组，按0,1,2顺序下去代表不同状态，切换图片
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879101',
            row: '1',
            col: '4',
            gRow: 1,
            gCol: 8,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879104',
            row: '1',
            col: '7',
            gRow: 1,
            gCol: 11,
            type: '2',
            flag: '0',
            price: '69'
          },
          {
            id: '16879099',
            row: '1',
            col: '2',
            gRow: 1,
            gCol: 6,
            type: '3',
            flag: '0',
            price: '69'
          },
          {
            id: '16879102',
            row: '1',
            col: '5',
            gRow: 1,
            gCol: 9,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879105',
            row: '1',
            col: '8',
            gRow: 1,
            gCol: 12,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879100',
            row: '1',
            col: '3',
            gRow: 1,
            gCol: 7,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879103',
            row: '1',
            col: '6',
            gRow: 1,
            gCol: 10,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879107',
            row: '1',
            col: '9',
            gRow: 1,
            gCol: 14,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879113',
            row: '2',
            col: '1',
            gRow: 2,
            gCol: 3,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879117',
            row: '2',
            col: '4',
            gRow: 2,
            gCol: 7,
            type: '2',
            flag: '0',
            price: '69'
          },
          {
            id: '16879120',
            row: '2',
            col: '7',
            gRow: 2,
            gCol: 10,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879124',
            row: '2',
            col: '10',
            gRow: 2,
            gCol: 14,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879114',
            row: '2',
            col: '2',
            gRow: 2,
            gCol: 4,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879118',
            row: '2',
            col: '5',
            gRow: 2,
            gCol: 8,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879121',
            row: '2',
            col: '8',
            gRow: 2,
            gCol: 11,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879125',
            row: '2',
            col: '11',
            gRow: 2,
            gCol: 15,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879116',
            row: '2',
            col: '3',
            gRow: 2,
            gCol: 6,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879119',
            row: '2',
            col: '6',
            gRow: 2,
            gCol: 9,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879122',
            row: '2',
            col: '9',
            gRow: 2,
            gCol: 12,
            type: '3',
            flag: '0',
            price: '69'
          },
          {
            id: '16879142',
            row: '3',
            col: '13',
            gRow: 3,
            gCol: 15,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879129',
            row: '3',
            col: '2',
            gRow: 3,
            gCol: 2,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879133',
            row: '3',
            col: '5',
            gRow: 3,
            gCol: 6,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879136',
            row: '3',
            col: '8',
            gRow: 3,
            gCol: 9,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879139',
            row: '3',
            col: '11',
            gRow: 3,
            gCol: 12,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879143',
            row: '3',
            col: '14',
            gRow: 3,
            gCol: 16,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879130',
            row: '3',
            col: '3',
            gRow: 3,
            gCol: 3,
            type: '2',
            flag: '0',
            price: '69'
          },
          {
            id: '16879134',
            row: '3',
            col: '6',
            gRow: 3,
            gCol: 7,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879137',
            row: '3',
            col: '9',
            gRow: 3,
            gCol: 10,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879141',
            row: '3',
            col: '12',
            gRow: 3,
            gCol: 14,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879144',
            row: '3',
            col: '15',
            gRow: 3,
            gCol: 17,
            type: '3',
            flag: '0',
            price: '69'
          },
          {
            id: '16879128',
            row: '3',
            col: '1',
            gRow: 3,
            gCol: 1,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879131',
            row: '3',
            col: '4',
            gRow: 3,
            gCol: 4,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879135',
            row: '3',
            col: '7',
            gRow: 3,
            gCol: 8,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879138',
            row: '3',
            col: '10',
            gRow: 3,
            gCol: 11,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879154',
            row: '4',
            col: '9',
            gRow: 4,
            gCol: 10,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879145',
            row: '4',
            col: '1',
            gRow: 4,
            gCol: 1,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879158',
            row: '4',
            col: '12',
            gRow: 4,
            gCol: 14,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879148',
            row: '4',
            col: '4',
            gRow: 4,
            gCol: 4,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879161',
            row: '4',
            col: '15',
            gRow: 4,
            gCol: 17,
            type: '3',
            flag: '0',
            price: '69'
          },
          {
            id: '16879152',
            row: '4',
            col: '7',
            gRow: 4,
            gCol: 8,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879155',
            row: '4',
            col: '10',
            gRow: 4,
            gCol: 11,
            type: '2',
            flag: '0',
            price: '69'
          },
          {
            id: '16879146',
            row: '4',
            col: '2',
            gRow: 4,
            gCol: 2,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879159',
            row: '4',
            col: '13',
            gRow: 4,
            gCol: 15,
            type: '2',
            flag: '0',
            price: '69'
          },
          {
            id: '16879150',
            row: '4',
            col: '5',
            gRow: 4,
            gCol: 6,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879153',
            row: '4',
            col: '8',
            gRow: 4,
            gCol: 9,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879156',
            row: '4',
            col: '11',
            gRow: 4,
            gCol: 12,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879147',
            row: '4',
            col: '3',
            gRow: 4,
            gCol: 3,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879160',
            row: '4',
            col: '14',
            gRow: 4,
            gCol: 16,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879151',
            row: '4',
            col: '6',
            gRow: 4,
            gCol: 7,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879164',
            row: '5',
            col: '3',
            gRow: 5,
            gCol: 3,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879168',
            row: '5',
            col: '6',
            gRow: 5,
            gCol: 7,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879171',
            row: '5',
            col: '9',
            gRow: 5,
            gCol: 10,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879175',
            row: '5',
            col: '12',
            gRow: 5,
            gCol: 14,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879178',
            row: '5',
            col: '15',
            gRow: 5,
            gCol: 17,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879162',
            row: '5',
            col: '1',
            gRow: 5,
            gCol: 1,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879165',
            row: '5',
            col: '4',
            gRow: 5,
            gCol: 4,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879169',
            row: '5',
            col: '7',
            gRow: 5,
            gCol: 8,
            type: '2',
            flag: '0',
            price: '69'
          },
          {
            id: '16879172',
            row: '5',
            col: '10',
            gRow: 5,
            gCol: 11,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879176',
            row: '5',
            col: '13',
            gRow: 5,
            gCol: 15,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879163',
            row: '5',
            col: '2',
            gRow: 5,
            gCol: 2,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879167',
            row: '5',
            col: '5',
            gRow: 5,
            gCol: 6,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879170',
            row: '5',
            col: '8',
            gRow: 5,
            gCol: 9,
            type: '2',
            flag: '0',
            price: '69'
          },
          {
            id: '16879173',
            row: '5',
            col: '11',
            gRow: 5,
            gCol: 12,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879177',
            row: '5',
            col: '14',
            gRow: 5,
            gCol: 16,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879207',
            row: '6',
            col: '11',
            gRow: 7,
            gCol: 12,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879211',
            row: '6',
            col: '14',
            gRow: 7,
            gCol: 16,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879198',
            row: '6',
            col: '3',
            gRow: 7,
            gCol: 3,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879202',
            row: '6',
            col: '6',
            gRow: 7,
            gCol: 7,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879205',
            row: '6',
            col: '9',
            gRow: 7,
            gCol: 10,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879209',
            row: '6',
            col: '12',
            gRow: 7,
            gCol: 14,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879212',
            row: '6',
            col: '15',
            gRow: 7,
            gCol: 17,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879196',
            row: '6',
            col: '1',
            gRow: 7,
            gCol: 1,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879199',
            row: '6',
            col: '4',
            gRow: 7,
            gCol: 4,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879203',
            row: '6',
            col: '7',
            gRow: 7,
            gCol: 8,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879206',
            row: '6',
            col: '10',
            gRow: 7,
            gCol: 11,
            type: '2',
            flag: '0',
            price: '69'
          },
          {
            id: '16879210',
            row: '6',
            col: '13',
            gRow: 7,
            gCol: 15,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879197',
            row: '6',
            col: '2',
            gRow: 7,
            gCol: 2,
            type: '3',
            flag: '0',
            price: '69'
          },
          {
            id: '16879201',
            row: '6',
            col: '5',
            gRow: 7,
            gCol: 6,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879204',
            row: '6',
            col: '8',
            gRow: 7,
            gCol: 9,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879220',
            row: '7',
            col: '7',
            gRow: 8,
            gCol: 8,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879223',
            row: '7',
            col: '10',
            gRow: 8,
            gCol: 11,
            type: '2',
            flag: '0',
            price: '69'
          },
          {
            id: '16879214',
            row: '7',
            col: '2',
            gRow: 8,
            gCol: 2,
            type: '3',
            flag: '0',
            price: '69'
          },
          {
            id: '16879227',
            row: '7',
            col: '13',
            gRow: 8,
            gCol: 15,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879218',
            row: '7',
            col: '5',
            gRow: 8,
            gCol: 6,
            type: '3',
            flag: '0',
            price: '69'
          },
          {
            id: '16879221',
            row: '7',
            col: '8',
            gRow: 8,
            gCol: 9,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879224',
            row: '7',
            col: '11',
            gRow: 8,
            gCol: 12,
            type: '2',
            flag: '0',
            price: '69'
          },
          {
            id: '16879215',
            row: '7',
            col: '3',
            gRow: 8,
            gCol: 3,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879228',
            row: '7',
            col: '14',
            gRow: 8,
            gCol: 16,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879219',
            row: '7',
            col: '6',
            gRow: 8,
            gCol: 7,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879222',
            row: '7',
            col: '9',
            gRow: 8,
            gCol: 10,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879213',
            row: '7',
            col: '1',
            gRow: 8,
            gCol: 1,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879226',
            row: '7',
            col: '12',
            gRow: 8,
            gCol: 14,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879216',
            row: '7',
            col: '4',
            gRow: 8,
            gCol: 4,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879229',
            row: '7',
            col: '15',
            gRow: 8,
            gCol: 17,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879230',
            row: '8',
            col: '1',
            gRow: 9,
            gCol: 1,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879233',
            row: '8',
            col: '4',
            gRow: 9,
            gCol: 4,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879237',
            row: '8',
            col: '7',
            gRow: 9,
            gCol: 8,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879240',
            row: '8',
            col: '10',
            gRow: 9,
            gCol: 11,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879244',
            row: '8',
            col: '13',
            gRow: 9,
            gCol: 15,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879231',
            row: '8',
            col: '2',
            gRow: 9,
            gCol: 2,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879235',
            row: '8',
            col: '5',
            gRow: 9,
            gCol: 6,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879238',
            row: '8',
            col: '8',
            gRow: 9,
            gCol: 9,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879241',
            row: '8',
            col: '11',
            gRow: 9,
            gCol: 12,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879245',
            row: '8',
            col: '14',
            gRow: 9,
            gCol: 16,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879232',
            row: '8',
            col: '3',
            gRow: 9,
            gCol: 3,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879236',
            row: '8',
            col: '6',
            gRow: 9,
            gCol: 7,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879239',
            row: '8',
            col: '9',
            gRow: 9,
            gCol: 10,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879243',
            row: '8',
            col: '12',
            gRow: 9,
            gCol: 14,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879246',
            row: '8',
            col: '15',
            gRow: 9,
            gCol: 17,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879256',
            row: '9',
            col: '9',
            gRow: 10,
            gCol: 10,
            type: '3',
            flag: '0',
            price: '69'
          },
          {
            id: '16879260',
            row: '9',
            col: '12',
            gRow: 10,
            gCol: 14,
            type: '3',
            flag: '0',
            price: '69'
          },
          {
            id: '16879263',
            row: '9',
            col: '15',
            gRow: 10,
            gCol: 17,
            type: '2',
            flag: '0',
            price: '69'
          },
          {
            id: '16879247',
            row: '9',
            col: '1',
            gRow: 10,
            gCol: 1,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879250',
            row: '9',
            col: '4',
            gRow: 10,
            gCol: 4,
            type: '2',
            flag: '0',
            price: '69'
          },
          {
            id: '16879254',
            row: '9',
            col: '7',
            gRow: 10,
            gCol: 8,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879257',
            row: '9',
            col: '10',
            gRow: 10,
            gCol: 11,
            type: '2',
            flag: '0',
            price: '69'
          },
          {
            id: '16879261',
            row: '9',
            col: '13',
            gRow: 10,
            gCol: 15,
            type: '2',
            flag: '0',
            price: '69'
          },
          {
            id: '16879248',
            row: '9',
            col: '2',
            gRow: 10,
            gCol: 2,
            type: '2',
            flag: '0',
            price: '69'
          },
          {
            id: '16879252',
            row: '9',
            col: '5',
            gRow: 10,
            gCol: 6,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879255',
            row: '9',
            col: '8',
            gRow: 10,
            gCol: 9,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879258',
            row: '9',
            col: '11',
            gRow: 10,
            gCol: 12,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879262',
            row: '9',
            col: '14',
            gRow: 10,
            gCol: 16,
            type: '0',
            flag: '0',
            price: '69'
          },
          {
            id: '16879249',
            row: '9',
            col: '3',
            gRow: 10,
            gCol: 3,
            type: '3',
            flag: '0',
            price: '69'
          },
          {
            id: '16879253',
            row: '9',
            col: '6',
            gRow: 10,
            gCol: 7,
            type: '2',
            flag: '0',
            price: '69'
          }
        ],
        seatTypeList: [
          {
            name: '可选',
            type: '0',
            seats: 1,
            icon: 'https://www.xollipop.top/可选.png',
            isShow: '1',
            position: 'up'
          },
          {
            name: '已选',
            type: '0-1',
            seats: 1,
            icon: 'https://www.xollipop.top/已选.png',
            isShow: '1',
            position: 'up'
          },
          {
            name: '已售',
            type: '0-2',
            seats: 1,
            icon: 'https://www.xollipop.top/已售.png',
            isShow: '1',
            position: 'up'
          },
          {
            name: '维修',
            type: '0-3',
            seats: 1,
            icon: 'https://www.xollipop.top/维修.png',
            isShow: '1',
            position: 'up'
          },
          {
            name: '情侣首座可选',
            type: '1',
            seats: 1,
            icon: 'https://www.xollipop.top/情侣首座可选.png',
            isShow: '0',
            position: 'up'
          },
          {
            name: '情侣首座已选',
            type: '1-1',
            seats: 1,
            icon: 'https://www.xollipop.top/情侣首座已选.png',
            isShow: '0',
            position: 'up'
          },
          {
            name: '情侣首座已售',
            type: '1-2',
            seats: 1,
            icon: 'https://www.xollipop.top/情侣首座已售.png',
            isShow: '0',
            position: 'up'
          },
          {
            name: '情侣首座维修',
            type: '1-3',
            seats: 1,
            icon: 'https://www.xollipop.top/情侣首座维修.png',
            isShow: '0',
            position: 'up'
          },
          {
            name: '情侣次座可选',
            type: '2',
            seats: 1,
            icon: 'https://www.xollipop.top/情侣次座可选.png',
            isShow: '0',
            position: 'up'
          },
          {
            name: '情侣次座已选',
            type: '2-1',
            seats: 1,
            icon: 'https://www.xollipop.top/情侣次座已选.png',
            isShow: '0',
            position: 'up'
          },
          {
            name: '情侣次座已售',
            type: '2-2',
            seats: 1,
            icon: 'https://www.xollipop.top/情侣次座已售.png',
            isShow: '0',
            position: 'up'
          },
          {
            name: '情侣次座维修',
            type: '2-3',
            seats: 1,
            icon: 'https://www.xollipop.top/情侣次座维修.png',
            isShow: '0',
            position: 'up'
          },
          {
            name: '情侣座',
            type: '5',
            seats: 2,
            icon: 'https://www.xollipop.top/情侣座.png',
            isShow: '1',
            position: 'up'
          }
        ]
      },
      width: 0.2, // 每个座位的宽
      height: 0.2, // 每个座位的高
      positionDistin: 0.2 // 每个座位偏移距离
    }
  },
  created() {
    console.log(this.$route)
    this.cinemaInfo.movieName = this.$route.query.name
    this.cinemaInfo.cinemaId = this.$route.query.cinemaUrl
    this.cinemaInfo.imgUrl = this.$route.query.imgUrl
  },
  methods: {
    //点击座位的时候切换图片。
    clickzuowei(val) {
      console.log(val, '座位信息')
      //循环影厅内座位信息
      this.cinemaInfo.seatList.forEach((item) => {
        //判断：选中座位和数组内的id是否一致
        if (item.id == val.id) {
          //一致就判断他的状态是不是0,0代表未选中，如果是未选中，那就改为1,1就是选中状态。
          if (item.type == 0) {
            item.type = 1
            //如果状态是1，也就是已经选中的状态，点击就会变成未选中
          } else if (item.type == 1) {
            item.type = 0
            //如果状态2，也就是已经出售的座位，就提示从新选座
          } else if (item.type == 2) {
            Dialog.alert({
              title: '宝贝儿',
              message: '座位被别人选中了，请重新选择~~~'
            }).then(() => {
              // on close
            })
            //如果状态3，代表座位损坏，也是提示维修中。
          } else if (item.type == 3) {
            Dialog.alert({
              title: '宝贝儿',
              message: '此座位损坏，正在维修中！'
            }).then(() => {
              // on close
            })
          }
        }
      })
    },
    //确认选座
    ok() {
      //筛选出选择的座位
      let info = this.cinemaInfo.seatList.filter((item) => {
        return item.type == 1
      })
      let list = []
      //筛选出选择的座位排和列
      info.forEach((item) => {
        list.push(item.row + ' 排 ' + item.col + ' 座 ')
      })
      //有选中的时候显示选中信息和确认购买。没有选中的时候提醒先选座
      if (info.length == 0) {
        Dialog.alert({
          title: '宝贝儿',
          message: '请先选择座位，再确认购买哦~~~'
        }).then(() => {
          // on close
        })
      } else {
        Dialog.confirm({
          title: '恭喜',
          message: '当前选中座位:' + list.toString()
        })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          })
      }
      console.log(list)
      this.$router.push({
        name: 'cinemafind',
        params: {},
        query: {
          cinemaUrl: this.cinemaInfo.cinemaId,
          name: this.cinemaInfo.movieName,
          imgUrl: this.cinemaInfo.imgUrl,
          list: list
        }
      })
    }
  }
})
</script>

<style scoepd>
.headerbox {
  background: rgb(214, 67, 67);
  color: #fff;
  font-size: 0.2rem;
  line-height: 0.6rem;
  height: 0.6rem;
  display: flex;
}
.header-left {
  font-size: 0.3rem;
  margin-left: 0.1rem;
  width: 0.5rem;
}
.headerright {
  width: 70%;
  font-size: 0.2rem;
  margin-left: 0.1rem;
  text-align: center;
  color: #fff !important;
}
a {
  color: #fff;
}
.seatClass {
  position: absolute;
}
.box {
  position: relative;
  margin-top: -0.2rem;
}
.seatImgClass {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.title {
  width: 100%;
  height: 0.7rem;
  background-image: linear-gradient(45deg, #9fa5d5, #aebaf8);
  background: rgb(214, 67, 67);
  text-align: center;
  line-height: 0.7rem;
  color: #fff;
  letter-spacing: 2px;
}
.titleInfo {
  display: flex;
  justify-content: space-between;
  font-size: 0.07rem;
  color: #ccc;
  margin-top: 0.05rem;
  padding: 0 0.05rem 0 0.05rem;
}
.centerInfo {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 0.05rem;
}
.centerInfo2 {
  display: flex;
  align-items: center;
}
.screen {
  width: 1rem;
  border: 0.5rem solid #ccc;
  border-color: #ccc transparent transparent transparent;
  height: 0.1rem;
  margin: auto;
  margin-top: 0.05rem;
}
.screen-text {
  text-align: center;
  white-space: nowrap;
  font-size: 0.2rem;
  font-weight: 600;
  color: #fff;
  margin-top: -0.5rem;
}
.btn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  background-image: linear-gradient(45deg, #9fa5d5, #aebaf8);
  background: rgb(214, 67, 67);
  z-index: 9999;
  text-align: center;
  line-height: 1rem;
  color: #fff;
}
</style>
